<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>css之flex | 伊水河的博客</title>
    <meta name="generator" content="VuePress 1.7.1">
    <link rel="icon" href="/logo.png">
    <meta name="description" content="SO FAR SO GOOD">
    <meta name="image" content="https://yihe.cool/images/flex/初始容器.png">
    <meta name="twitter:title" content="css之flex">
    <meta name="twitter:description" content="">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:image" content="https://yihe.cool/images/flex/初始容器.png">
    <meta name="twitter:url" content="https://yihe.cool/guide/flex.html">
    <meta property="og:type" content="article">
    <meta property="og:title" content="css之flex">
    <meta property="og:description" content="">
    <meta property="og:image" content="https://yihe.cool/images/flex/初始容器.png">
    <meta property="og:url" content="https://yihe.cool/guide/flex.html">
    <meta property="article:author" content="伊水河">
    <meta property="article:published_time" content="2021-06-06T00:00:00.000Z">
    <meta property="article:tag" content="css">
    <meta itemprop="name" content="css之flex">
    <meta itemprop="description" content="">
    <meta itemprop="image" content="https://yihe.cool/images/flex/初始容器.png">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    
    <link rel="preload" href="/assets/css/0.styles.152c4062.css" as="style"><link rel="preload" href="/assets/js/app.2d22f3f9.js" as="script"><link rel="preload" href="/assets/js/3.6721f6a0.js" as="script"><link rel="preload" href="/assets/js/1.546ea5a7.js" as="script"><link rel="preload" href="/assets/js/15.7df6d74c.js" as="script"><link rel="prefetch" href="/assets/js/10.b827ae65.js"><link rel="prefetch" href="/assets/js/11.5e38b612.js"><link rel="prefetch" href="/assets/js/12.3f3699b0.js"><link rel="prefetch" href="/assets/js/13.7d83bc51.js"><link rel="prefetch" href="/assets/js/14.2ea90c77.js"><link rel="prefetch" href="/assets/js/16.33c1bac8.js"><link rel="prefetch" href="/assets/js/17.1aef86d1.js"><link rel="prefetch" href="/assets/js/18.b74cd2bd.js"><link rel="prefetch" href="/assets/js/19.73f82cea.js"><link rel="prefetch" href="/assets/js/20.6354096e.js"><link rel="prefetch" href="/assets/js/21.fd87273b.js"><link rel="prefetch" href="/assets/js/22.f90ee83e.js"><link rel="prefetch" href="/assets/js/23.e5f4f0a1.js"><link rel="prefetch" href="/assets/js/24.239130eb.js"><link rel="prefetch" href="/assets/js/25.db493ad9.js"><link rel="prefetch" href="/assets/js/26.26f3df98.js"><link rel="prefetch" href="/assets/js/27.d55bc04b.js"><link rel="prefetch" href="/assets/js/28.ac3a437a.js"><link rel="prefetch" href="/assets/js/29.9abce28f.js"><link rel="prefetch" href="/assets/js/30.ea843119.js"><link rel="prefetch" href="/assets/js/31.30a083bf.js"><link rel="prefetch" href="/assets/js/32.5f0b6b12.js"><link rel="prefetch" href="/assets/js/33.11456c83.js"><link rel="prefetch" href="/assets/js/34.e9ede601.js"><link rel="prefetch" href="/assets/js/35.17e5bb78.js"><link rel="prefetch" href="/assets/js/36.2f441457.js"><link rel="prefetch" href="/assets/js/37.e9fa7538.js"><link rel="prefetch" href="/assets/js/38.6bd1c237.js"><link rel="prefetch" href="/assets/js/39.8b0b956e.js"><link rel="prefetch" href="/assets/js/4.3ad057db.js"><link rel="prefetch" href="/assets/js/40.89ef1936.js"><link rel="prefetch" href="/assets/js/41.48d0560d.js"><link rel="prefetch" href="/assets/js/42.f804c44f.js"><link rel="prefetch" href="/assets/js/43.9dc6d003.js"><link rel="prefetch" href="/assets/js/44.3033d12c.js"><link rel="prefetch" href="/assets/js/45.60834ce1.js"><link rel="prefetch" href="/assets/js/46.c7eaf70d.js"><link rel="prefetch" href="/assets/js/47.a618490c.js"><link rel="prefetch" href="/assets/js/48.39a68335.js"><link rel="prefetch" href="/assets/js/49.1fa3bd55.js"><link rel="prefetch" href="/assets/js/5.4b2144a0.js"><link rel="prefetch" href="/assets/js/50.0ad5db28.js"><link rel="prefetch" href="/assets/js/51.843c519b.js"><link rel="prefetch" href="/assets/js/52.47d63846.js"><link rel="prefetch" href="/assets/js/53.5284b79d.js"><link rel="prefetch" href="/assets/js/54.b10b8ac1.js"><link rel="prefetch" href="/assets/js/55.3780915d.js"><link rel="prefetch" href="/assets/js/56.4a811b5c.js"><link rel="prefetch" href="/assets/js/57.228652ee.js"><link rel="prefetch" href="/assets/js/58.ef55d2ec.js"><link rel="prefetch" href="/assets/js/59.cbb81185.js"><link rel="prefetch" href="/assets/js/6.3dafc094.js"><link rel="prefetch" href="/assets/js/60.5257b363.js"><link rel="prefetch" href="/assets/js/61.03db625c.js"><link rel="prefetch" href="/assets/js/62.5982e690.js"><link rel="prefetch" href="/assets/js/63.0eccb44b.js"><link rel="prefetch" href="/assets/js/64.d92985de.js"><link rel="prefetch" href="/assets/js/65.4fd6aed1.js"><link rel="prefetch" href="/assets/js/66.acaf73d6.js"><link rel="prefetch" href="/assets/js/67.6db75c01.js"><link rel="prefetch" href="/assets/js/68.1dce863f.js"><link rel="prefetch" href="/assets/js/69.4222a30b.js"><link rel="prefetch" href="/assets/js/7.be8adaa3.js"><link rel="prefetch" href="/assets/js/8.3121f1c6.js"><link rel="prefetch" href="/assets/js/9.03dc3458.js">
    <link rel="stylesheet" href="/assets/css/0.styles.152c4062.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container no-sidebar" data-v-2d5f533b><div data-v-2d5f533b><div id="loader-wrapper" class="loading-wrapper" data-v-d48f4d20 data-v-2d5f533b data-v-2d5f533b><div class="loader-main" data-v-d48f4d20><div data-v-d48f4d20></div><div data-v-d48f4d20></div><div data-v-d48f4d20></div><div data-v-d48f4d20></div></div> <!----> <!----></div> <div class="password-shadow password-wrapper-out" style="display:none;" data-v-64685f0e data-v-2d5f533b data-v-2d5f533b><h3 class="title" style="display:none;" data-v-64685f0e data-v-64685f0e>伊水河的博客</h3> <!----> <label id="box" class="inputBox" style="display:none;" data-v-64685f0e data-v-64685f0e><input type="password" value="" data-v-64685f0e> <span data-v-64685f0e>Konck! Knock!</span> <button data-v-64685f0e>OK</button></label> <div class="footer" style="display:none;" data-v-64685f0e data-v-64685f0e><span data-v-64685f0e><i class="iconfont reco-theme" data-v-64685f0e></i> <a target="blank" href="https://vuepress-theme-reco.recoluan.com" data-v-64685f0e>vuePress-theme-reco</a></span> <span data-v-64685f0e><i class="iconfont reco-copyright" data-v-64685f0e></i> <a data-v-64685f0e><span data-v-64685f0e>伊水河</span>
            
          <span data-v-64685f0e>2020 - </span>
          2021
        </a></span></div></div> <div class="hide" data-v-2d5f533b><header class="navbar" data-v-2d5f533b><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">伊水河的博客</span></a> <div class="links"><div class="color-picker"><a class="color-button"><i class="iconfont reco-color"></i></a> <div class="color-picker-menu" style="display:none;"><div class="mode-options"><h4 class="title">Choose mode</h4> <ul class="color-mode-options"><li class="dark">dark</li><li class="auto active">auto</li><li class="light">light</li></ul></div></div></div> <div class="search-box"><i class="iconfont reco-search"></i> <input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/categories/前端/" class="nav-link"><i class="iconfont reco-blog"></i>
  前端
</a></div><div class="nav-item"><a href="/categories/leetcode/" class="nav-link"><i class="iconfont reco-coding"></i>
  力扣
</a></div><div class="nav-item"><a href="/tag/" class="nav-link"><i class="iconfont reco-tag"></i>
  标签
</a></div><div class="nav-item"><a href="/note/" class="nav-link"><i class="iconfont reco-suggestion"></i>
  笔记
</a></div><div class="nav-item"><a href="/todo/" class="nav-link"><i class="iconfont reco-document"></i>
  TODO
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-account"></i>
      关于
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://juejin.cn/user/571401777456621" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-juejin"></i>
  掘金
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://yishuihe.gitee.io" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-mayun"></i>
  码云
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://github.com/lixiang89" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-github"></i>
  github
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://node.kg.qq.com/personal?uid=659d9d802d253e8231" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont "></i>
  全民K歌
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask" data-v-2d5f533b></div> <aside class="sidebar" data-v-2d5f533b><div class="personal-info-wrapper" data-v-ca798c94 data-v-2d5f533b><img src="/b.jpg" alt="author-avatar" class="personal-img" data-v-ca798c94> <h3 class="name" data-v-ca798c94>
    伊水河
  </h3> <div class="num" data-v-ca798c94><div data-v-ca798c94><h3 data-v-ca798c94>51</h3> <h6 data-v-ca798c94>文章</h6></div> <div data-v-ca798c94><h3 data-v-ca798c94>13</h3> <h6 data-v-ca798c94>标签</h6></div></div> <hr data-v-ca798c94></div> <nav class="nav-links"><div class="nav-item"><a href="/categories/前端/" class="nav-link"><i class="iconfont reco-blog"></i>
  前端
</a></div><div class="nav-item"><a href="/categories/leetcode/" class="nav-link"><i class="iconfont reco-coding"></i>
  力扣
</a></div><div class="nav-item"><a href="/tag/" class="nav-link"><i class="iconfont reco-tag"></i>
  标签
</a></div><div class="nav-item"><a href="/note/" class="nav-link"><i class="iconfont reco-suggestion"></i>
  笔记
</a></div><div class="nav-item"><a href="/todo/" class="nav-link"><i class="iconfont reco-document"></i>
  TODO
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-account"></i>
      关于
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://juejin.cn/user/571401777456621" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-juejin"></i>
  掘金
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://yishuihe.gitee.io" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-mayun"></i>
  码云
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://github.com/lixiang89" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-github"></i>
  github
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://node.kg.qq.com/personal?uid=659d9d802d253e8231" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont "></i>
  全民K歌
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <!----></nav> <!----> </aside> <div class="password-shadow password-wrapper-in" style="display:none;" data-v-64685f0e data-v-2d5f533b><h3 class="title" style="display:none;" data-v-64685f0e data-v-64685f0e>css之flex</h3> <!----> <label id="box" class="inputBox" style="display:none;" data-v-64685f0e data-v-64685f0e><input type="password" value="" data-v-64685f0e> <span data-v-64685f0e>Konck! Knock!</span> <button data-v-64685f0e>OK</button></label> <div class="footer" style="display:none;" data-v-64685f0e data-v-64685f0e><span data-v-64685f0e><i class="iconfont reco-theme" data-v-64685f0e></i> <a target="blank" href="https://vuepress-theme-reco.recoluan.com" data-v-64685f0e>vuePress-theme-reco</a></span> <span data-v-64685f0e><i class="iconfont reco-copyright" data-v-64685f0e></i> <a data-v-64685f0e><span data-v-64685f0e>伊水河</span>
            
          <span data-v-64685f0e>2020 - </span>
          2021
        </a></span></div></div> <div data-v-2d5f533b><main class="page"><div class="page-title" style="display:none;"><h1 class="title">css之flex</h1> <div data-v-3b7f5bdf><i class="iconfont reco-account" data-v-3b7f5bdf><span data-v-3b7f5bdf>伊水河</span></i> <i class="iconfont reco-date" data-v-3b7f5bdf><span data-v-3b7f5bdf>2021-06-06</span></i> <i class="iconfont reco-eye" data-v-3b7f5bdf><span id="/guide/flex.html" data-flag-title="Your Article Title" class="leancloud-visitors" data-v-3b7f5bdf><a class="leancloud-visitors-count" style="font-size:.9rem;font-weight:normal;color:#999;"></a></span></i> <i class="iconfont reco-tag tags" data-v-3b7f5bdf><span class="tag-item" data-v-3b7f5bdf>css</span><span class="tag-item" data-v-3b7f5bdf>flex</span></i></div></div> <div class="theme-reco-content content__default" style="display:none;"><p>之前写过一篇介绍grid的文章，也懒了好久，今天来聊一聊flex吧。</p> <h2 id="display-flex"><a href="#display-flex" class="header-anchor">#</a> display:flex</h2> <p>使用flex首先要将容器的<code>display</code>属性设置为<code>flex</code>或<code>inline-flex</code>。使其转换为flex容器。</p> <ul><li>flex：块状felx</li> <li>inline-flex：内联flex</li></ul> <p>首先我们先准备一套容器备用：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flex<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item i1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item i2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item i3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item i4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item i5<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item i6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>6<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item i7<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>7<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item i8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>8<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item i9<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>9<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.flex .item</span><span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
    <span class="token property">border</span><span class="token punctuation">:</span> 1px solid blue<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>此时，页面的样子是：</p> <p><img src="/images/flex/%E5%88%9D%E5%A7%8B%E5%AE%B9%E5%99%A8.png" alt="初始容器"></p> <p>然后，我们将.flex的display设置为flex，</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.flex</span><span class="token punctuation">{</span>
    <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>页面变为</p> <p><img src="/images/flex/flex%E5%AE%B9%E5%99%A8.png" alt="初始容器"></p> <p>为什么会这样呢？其实是当元素被设置为flex容器时，会有一些默认的属性和值生效。其中导致子<code>div</code>——<code>.item</code>,也可称他们为flex元素，变成横向排列的的属性时<code>flex-direction</code>。他的默认值是<code>row</code>，即横向排列。既然说到这里了，那么接下来就介绍他吧。</p> <p>在这之前呢，先来了解两个概念：轴和起止线</p> <h2 id="轴和起止线"><a href="#轴和起止线" class="header-anchor">#</a> 轴和起止线</h2> <p>flex容器有两根轴，主轴和交叉轴。其中主轴由<code>flex-direction</code>的值决定。默认值<code>row</code>表示主轴是从左到右。起止线分别位于左右两边，左起右止（本文只讨论ltr的情况，rtl与之左右相反，右起左止）。交叉轴方向为从上到下，起止线为上起下止。了解这个以后我们就可以继续了。</p> <h2 id="flex-direction"><a href="#flex-direction" class="header-anchor">#</a> flex-direction</h2> <p>flex-direction有四个值，分别是：</p> <ul><li>row               主轴从左到右，交叉轴从上到下</li> <li>row-reverse       主轴从右到左，交叉轴从上到下</li> <li>column            主轴从上到下，交叉轴从左到右</li> <li>column-reverse    主轴从下到上，交叉轴从左到右</li></ul> <p>下面是四种值的对应表现：</p> <p><img src="/images/flex/direction.gif" alt="direction"></p> <p>flex容器的默认值除了<code>flex-direction:row</code>之外，还有：</p> <ul><li>元素从主轴起始线开始。</li> <li>元素在主轴方向不会被拉伸——元素属性<code>flex-grow:0</code>，但可以缩小——元素属性<code>flex-shrink:1</code>。</li> <li>元素在交叉轴上会被拉伸——容器属性<code>align-items: stretch</code>;</li> <li>元素不会换行——容器属性<code>flex-wrap:nowrap</code></li> <li><code>flex-basis:auto</code></li></ul> <p>接下来我们就来一一认识他们吧。</p> <h2 id="flex-shrink"><a href="#flex-shrink" class="header-anchor">#</a> flex-shrink</h2> <p>flex-shrink可以定义元素的缩小规则，值为非负整数，默认值为1。为了看到效果，我们先把容器的宽度设置为小于总元素的值</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.flex</span><span class="token punctuation">{</span>
    <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 600px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>效果如图：</p> <p><img src="/images/flex/shrink1.gif" alt="shrink"></p> <p>可以看到，所有元素立马缩小了，宽度依然保持相等。因为所有元素的<code>flex-shrink</code>的值都是默认值1，所以他们缩小的比例也是相同的。如果更改其中某个元素的值呢？</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.i1</span><span class="token punctuation">{</span>
    <span class="token property">flex-shrink</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.i2</span><span class="token punctuation">{</span>
    <span class="token property">flex-shrink</span><span class="token punctuation">:</span> 3<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>为了方便计算，我们先去除<code>border</code>，来看一下吧：</p> <p><img src="/images/flex/shrink2.gif" alt="shrink2"></p> <p>可以看到<code>i1</code>的宽度为50，<code>i2</code>为25，其他均为75，这是怎么算出来的呢。原始元素总长度为<code>100*9=900</code>，现在容器长度为600。相差300。缩小的范围就在相差的300px之中，具体计算规则为：300除以总shrink的和值。上面为<code>2+3+1*7</code>，其他7个为默认值1。300除以12等于25。再用元素的初始宽度减去（shrink的值乘以25），所以<code>i1</code>的宽度为 <code>100-25*2=50</code>,同理<code>i2</code>为<code>100-25*3=25</code>。总结后为：</p> <p><code>元素初始宽度-（原始所有元素宽度-现在所有元素宽度）/所有元素总shrink和值*元素shrink值</code></p> <p>但是当这个值非常小的时候，元素会保留它的最小宽度（示例中文字宽度）。</p> <p>如果<code>flex-shirink</code>值为0，则不会缩小。</p> <p>如果加上<code>border</code>要怎么计算呢？首先我们要用差值加上<code>border</code>的总和值——其实是<code>原始所有元素宽度-（现在所有元素宽度-border总和）</code>算出content的宽，最后在算出的值加上自己的<code>border</code>就行。如上例子就是：<code>300+18=318</code>，<code>318/12=26.5</code>，i1：<code>100-26.5*2+1+1=49</code>，i2：<code>100-26.5*3+1+1=22.5</code>。</p> <h2 id="flex-grow"><a href="#flex-grow" class="header-anchor">#</a> flex-grow</h2> <p>用于设置元素的放大规则，将多余空间按照<code>flex-grow</code>的总和值平分后加到原有元素上。上面说过<code>flex-grow</code>的默认值为0，不会放大。那么来更改几个元素看看吧：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.flex</span><span class="token punctuation">{</span>
    <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 1200px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.i1</span><span class="token punctuation">{</span>
    <span class="token property">flex-grow</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.i2</span><span class="token punctuation">{</span>
    <span class="token property">flex-grow</span><span class="token punctuation">:</span> 3<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>总宽度1200，原始宽度900，多出300，分成<code>2+3=5</code>份，每份60px，所以<code>i1</code>的最终宽度为<code>100+60*2=220</code>，<code>i2</code>为<code>100+60*3=280</code></p> <p><img src="/images/flex/grow.png" alt="grow"></p> <h2 id="flex-basis"><a href="#flex-basis" class="header-anchor">#</a> flex-basis</h2> <p><code>flex-basis</code>可以设置元素在主轴方向上的大小。如<code>flex-direction</code>值为<code>row[-reverse]</code>，相当于<code>width</code>。<code>column[-reverse]</code>相当于<code>height</code>。当<code>flex-basis</code>（非<code>auto</code>）和<code>width</code>、<code>height</code>同时存在时，<code>flex-basis</code>的优先级更高。值为<code>auto</code>时则会使用<code>width</code>、<code>height</code>。上面例子都是默认值<code>auto</code>，这里就不赘述了。</p> <p><img src="/images/flex/basis.png" alt="basis"></p> <p>当<code>flex-basis</code>值为0时，元素会保留其能显示最小宽度，其余空间均为剩余空间，可用于<code>flex-grow</code>或<code>flex-shrink</code>计算。</p> <blockquote><p>据说某些浏览器0会出现问题，可尝试使用0%替换。</p></blockquote> <h2 id="flex-wrap"><a href="#flex-wrap" class="header-anchor">#</a> flex-wrap</h2> <p>用于控制当元素超出时是否换行。</p> <ul><li>nowrap 不换行，默认值</li> <li>wrap 多行</li> <li>warp-reverse 多行，但交换交叉轴的起止点</li></ul> <p>我们改变flex容器的<code>flex-wrap</code>值来看下：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.flex</span><span class="token punctuation">{</span>
    <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 600px<span class="token punctuation">;</span>
    <span class="token property">flex-wrap</span><span class="token punctuation">:</span> wrap<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p><img src="/images/flex/wrap.gif" alt="wrap"></p> <h2 id="flex-flow"><a href="#flex-flow" class="header-anchor">#</a> flex-flow</h2> <p>此为<code>flex-direction</code>和<code>flex-wrap</code>的缩写，如:<code>flex-flow:row wrap;</code></p> <h2 id="flex"><a href="#flex" class="header-anchor">#</a> flex</h2> <p>为flex-grow/flex-shrink/flex-basis的缩写形式。如：<code>flex:1 1 0</code>，此属性有四种预定义属性：</p> <ul><li>initial 相当于 0 1 auto</li> <li>auto  相当于 1 1 auto</li> <li>none  相当于 0 0 auto</li> <li>数值 相当于 数值 1 0% 如：<code>flex:1</code> 为 1 1 0%</li></ul> <h2 id="order"><a href="#order" class="header-anchor">#</a> order</h2> <p>值为整数，可以用来改变元素的顺序，默认值为0。小的值排在大的值前面。设置如下：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.i1</span><span class="token punctuation">{</span>
    <span class="token property">order</span><span class="token punctuation">:</span>2
<span class="token punctuation">}</span>
<span class="token selector">.i3</span><span class="token punctuation">{</span>
    <span class="token property">order</span><span class="token punctuation">:</span>-2
<span class="token punctuation">}</span>
</code></pre></div><p>效果如图：</p> <p><img src="/images/flex/order.png" alt="order"></p> <h2 id="gap"><a href="#gap" class="header-anchor">#</a> gap</h2> <p>同<code>grid</code>的<code>gap</code>，用于设置两个元素之间的间距：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.flex</span><span class="token punctuation">{</span>
    <span class="token property">gap</span><span class="token punctuation">:</span>30px
<span class="token punctuation">}</span>
</code></pre></div><p>效果如图：</p> <p><img src="/images/flex/gap.png" alt="gap"></p> <h2 id="justify-content"><a href="#justify-content" class="header-anchor">#</a> justify-content</h2> <p>用于设置元素在主轴上的对齐方式。(口是元素，—是空白)</p> <ul><li>flex-start 主轴起始线对齐                         |口口口——————|</li> <li>flex-end 主轴终止线对齐                           |——————口口口|</li> <li>center 居中                                      |———口口口———|</li> <li>space-between 元素之间间距相同，左右元素挨着两边    |口———口———口|</li> <li>space-around 元素左右两侧有相同的间距              |—口——口——口—|</li> <li>space-evenly 元素之间、元素与边之间间距相同         |—口—口—口—|</li></ul> <h2 id="align-items"><a href="#align-items" class="header-anchor">#</a> align-items</h2> <p>用于设置元素在交叉轴上的对齐方式。</p> <ul><li>flex-start 交叉轴起始线对齐</li> <li>flex-end 交叉轴终止线对齐</li> <li>center 居中</li> <li>stretch 拉伸补充，默认值。</li></ul> <p><code>stretch</code>的效果可以将flex容器的高度设置为<code>100px</code>，此时可以看到元素的高度填满整个高度。但是元素如果设置有自己的大小限制的话，则不会拉伸。</p> <p><img src="/images/flex/stretch.png" alt="stretch"></p> <h2 id="align-content"><a href="#align-content" class="header-anchor">#</a> align-content</h2> <p>当有多行时，用于设置多行相对于容器的对齐方式，其值包含了上述<code>justify-content</code>和<code>align-items</code>的所有值。效果也是一样的，来浏览一下吧</p> <p><img src="/images/flex/alignContent.gif" alt="alignContent"></p> <h2 id="align-self"><a href="#align-self" class="header-anchor">#</a> align-self</h2> <p>用于控制单个元素的对齐方式。可覆盖<code>align-items</code>的值。</p> <p>将容器<code>align-items</code>设置为<code>center</code>，<code>i1</code>的<code>align-self</code>设置为<code>flex-start</code>。效果如下：</p> <p><img src="/images/flex/self.png" alt="self"></p> <blockquote><p>经测，当多行时，<code>align-content</code>拥有高优先级，<code>align-self</code>不能覆盖其值。</p></blockquote> <p>呼~，可以愉快的去玩耍了。溜了溜了</p></div> <footer class="page-edit" style="display:none;"><!----> <!----></footer> <!----> <!----> <!----></main> <!----></div></div></div></div><div class="global-ui"><div class="back-to-ceiling" style="right:1rem;bottom:6rem;width:2.5rem;height:2.5rem;border-radius:.25rem;line-height:2.5rem;display:none;" data-v-c6073ba8 data-v-c6073ba8><svg t="1574745035067" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5404" class="icon" data-v-c6073ba8><path d="M526.60727968 10.90185116a27.675 27.675 0 0 0-29.21455937 0c-131.36607665 82.28402758-218.69155461 228.01873535-218.69155402 394.07834331a462.20625001 462.20625001 0 0 0 5.36959153 69.94390903c1.00431239 6.55289093-0.34802892 13.13561351-3.76865779 18.80351572-32.63518765 54.11355614-51.75690182 118.55860487-51.7569018 187.94566865a371.06718723 371.06718723 0 0 0 11.50484808 91.98906777c6.53300375 25.50556257 41.68394495 28.14064038 52.69160883 4.22606766 17.37162448-37.73630017 42.14135425-72.50938081 72.80769204-103.21549295 2.18761121 3.04276886 4.15646224 6.24463696 6.40373557 9.22774369a1871.4375 1871.4375 0 0 0 140.04691725 5.34970492 1866.36093723 1866.36093723 0 0 0 140.04691723-5.34970492c2.24727335-2.98310674 4.21612437-6.18497483 6.3937923-9.2178004 30.66633723 30.70611158 55.4360664 65.4791928 72.80769147 103.21549355 11.00766384 23.91457269 46.15860503 21.27949489 52.69160879-4.22606768a371.15156223 371.15156223 0 0 0 11.514792-91.99901164c0-69.36717486-19.13165746-133.82216804-51.75690182-187.92578088-3.42062944-5.66790279-4.76302748-12.26056868-3.76865837-18.80351632a462.20625001 462.20625001 0 0 0 5.36959269-69.943909c-0.00994388-166.08943902-87.32547796-311.81420293-218.6915546-394.09823051zM605.93803103 357.87693858a93.93749974 93.93749974 0 1 1-187.89594924 6.1e-7 93.93749974 93.93749974 0 0 1 187.89594924-6.1e-7z" p-id="5405" data-v-c6073ba8></path><path d="M429.50777625 765.63860547C429.50777625 803.39355007 466.44236686 1000.39046097 512.00932183 1000.39046097c45.56695499 0 82.4922232-197.00623328 82.5015456-234.7518555 0-37.75494459-36.9345906-68.35043303-82.4922232-68.34111062-45.57627738-0.00932239-82.52019037 30.59548842-82.51086798 68.34111062z" p-id="5406" data-v-c6073ba8></path></svg></div><APlayer audio="" fixed="true" theme="#b7daff" loop="loop" order="random" preload="auto" volume="0.7" mutex="true" lrc-type="3" list-folded="true" list-max-height="250" storage-name="vuepress-plugin-meting" id="aplayer-fixed"></APlayer></div></div>
    <script src="/assets/js/app.2d22f3f9.js" defer></script><script src="/assets/js/3.6721f6a0.js" defer></script><script src="/assets/js/1.546ea5a7.js" defer></script><script src="/assets/js/15.7df6d74c.js" defer></script>
  </body>
</html>
